generic types
generic type syntax
const myVar = GenericTypes<type1, type2,...>
arrays generic types
In this case, we can pass the type we want the array elements to be
example:
let scores: Array<number> = [70, 65, 75];
Promise -> ReturnType
We can use Promise generic type to specify the return type of async code. Also, to strongly-type what is returned from a fetch
function.
const response: Promise<Response> = fetch(url);
response.then((res) => console.log(res.ok));
Readonly -> Type
We can use the Readonly
generic type to make a type to be immutable
example:
type Action = {
type: "fetchedName",
data: string,
};
type ImmutableAction = Readonly<Action>;
Partial -> Type
It is like to set all members of a type as optional example:
//Partial<type>
type Contact = {
name: "Grazi",
age: 23,
};
// same thing
type Contact = {
name?: "Grazi",
age?: 23,
};
generic functions
About generic functions, we can imagine a situation that we typed our function to receive an array of strings, like this:
function firstOrNull(array: string[]): string | null {
return array.length === 0 ? null : array[0];
}
but... what if we need to do the same thing for an array of numbers?
In this case, we can use a generic functions to solve this problem.
generic functions syntax
function someFunc<T1, T2, ...>(){
...
}
We will often see names like T
and S
for type parameters in typescript
- T (for "T"ype)
- S (for "S"ate)
- E (for "E"lement)
- K (for "K"ey)
- V (for "V"alue)
Now is time to convert our firstOrNull function into generic typed funciton
function firstOrNull<ItemTypes>(array: ItemTypes[]): ItemTypes | null {
return array.length === 0 ? null : array[2];
}
console.log(firstOrNull<string>(["Rod", "Jane", "Fred"])); // Fred
console.log(firstOrNull<number>([1, 2, 3])); // 3
what if we don't put the generic type in the function caller?
firstOrNull(["Rod", "Jane", "Fred"])
typescript will infer that is a array of strings
string | null
generic arrow functions
there is a little problem with firstOrNull function when we transform this into arrow function
const firstOrNull = <ItemType, T>(
array: ItemType[]
): ItemType | null =>
array.length === 0 ? null : array[0];
the compiler will throw an error because it thinks the generic parameter is a React element
to solve this 👇:
const firstOrNull = <ItemType,>(
array: ItemType[]
): ItemType | null =>
array.length === 0 ? null : array[0];
yeah, just put a comma 😂
Generic interfaces
below we have a simple generic form interface:
interface Form<T> {
values: T;
}
interface Contact {
name: string;
email: string;
}
here is how we can strongly type the contactForm
variable
const contactForm: Form<Contact> = {
values: {
name: "Grazi",
email: "grazi@someemail.com"
}
}